<template>
<div>
    <el-table
        ref="treePage"
        :data="props_data"
        row-key="id"
        :stripe="stripe"
        border
        :tooltip-effect="tooltip" 
        :maxHeight="maxHeight"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <template v-for="(item,index) in tableHeader">
            <el-table-column show-overflow-tooltip :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :sortable="item.isSortable">
            </el-table-column>
        </template>
    </el-table>
    <pagingModule :props_total="props_total" :isTable="isTable" :props_pageNo="props_pageNo" :pageSize="pageSize" :pageSizeOpt="pageSizeOpt"  @pageBefore="handleBefore"></pagingModule>
</div>
</template>
<script>
    import pagingModule from "./pagingModule";
    export default {
        name:'treePageTable',
        components:{
            pagingModule
        },
        props:{
            url:String,
            apiName: Function,
            tooltip:String,//dark
            isTable:true,
            columns:{
                type:Array,
                default: () => []
            },
            tableData:{
                type:Array,
                default: () => []
            },
            stripe: {
                type: Boolean,
                default: false
            },
            pageSizeOpt:{
                type: Array,
                default() {
                    return [10, 20, 30, 50, 100];
                }
            },
            pageNum: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10,
            },
            maxHeight: {
                type: Number,
                default: 2000
            },
            tableRowClassName:{
                type: Function,
            },
        },
        data() {
            return {
                loading:false,
                tableHeader:this.columns,
                props_data: [],
                props_total: 0,
                props_pageNo: this.pageNum,
                props_query: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                },
                saveData:[],
                rowNum:1,
                checkedDetail:[],
            }
        },
        watch:{
            columns (val, oldVal) {
                this.tableHeader = val
            },
            props_data(val,oldVal){
                this.props_data = val;
            }
        },
        created(){
            this.saveDataInit();
        },
        methods: {
            //查询
            query(arg) {
                let that = this;
                this.loading = true;
                let param = {};
                if(arg && arg.pageNum){
                    param.pageNum = arg.pageNum;
                }
                Object.assign(param,arg)
                let apiName = that.apiName;
                if(!apiName){
                    that.props_data = that.tableData ? that.tableData : [];
                    that.saveData = that.tableData ? [...that.tableData] : [];
                    that.props_total = that.tableData?that.tableData.length:0;
                    that.saveDataInit();
                    return;
                }
                // debugger
                apiName(param).then(res => {
                // axios.post(url,param).then(res => {
                    that.loading = false;
                    res = res && res.rspBody ? res.rspBody : {}
                    if(JSON.stringify(res) == '{}'){
                        console.log('11')
                        // that.props_data = []
                        // that.saveData = []
                        // debugger
                        that.props_data = that.tableData//暂时 只是为了效果展示
                        that.saveData = that.tableData ? [...that.tableData] : [];//暂时 只是为了效果展示
                        that.props_pageNo = that.pageNum || 1;//暂时 只是为了效果展示
                        that.props_total = that.tableData.length;//暂时 只是为了效果展示
                        that.saveDataInit();//暂时 只是为了效果展示
                        return 
                    }
                    res.resultData = res.resultData ? res.resultData : []
                    that.props_data = res.resultData;
                    that.props_pageNo = res.pageNum || 1;
                    that.props_total = res.total ? res.total :0;
                    that.saveDataInit();
                    that.$emit('queryResult', res);
                });
            },
            handleBefore(pageArr) {
                if(pageArr.pageType=="size"){
                    this.query({
                        pageNum:1,
                        pageSize:pageArr.pageSize
                    });
                }else{
                    var changeFlag = false;
                    for(var i=0;i<this.saveData.length;i++){
                        if(this.saveData[i].opt&&this.saveData[i].opt == "insert"||this.saveData[i].opt == "update"||this.saveData[i].opt == "delete"){
                            changeFlag = true;
                            break;
                        }
                    }
                    if(changeFlag){
                        this.$alert("请先保存修改再切换分页", "提示");
                        return false;
                    }
                    this.query({
                        pageNum:pageArr.page
                    });
                }
                
            },
            // 初始化数据
            saveDataInit(){
                for(var i=0;i<this.props_data.length;i++){
                    this.props_data[i].rowNum = this.rowNum;
                    this.rowNum++;
                }
                this.saveData = [...this.props_data];
            },

        },
    }
</script>